<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>网银接口调用工具</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/js/bootstrap.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <h1>网银接口调用工具</h1>
        <div>
            <h4>操作说明</h4>
            <p class="text-success">1.点击下面的按钮，选择你需要查询的数据种类。</p>
            <p class="text-success">2.填入token，注意测试环境和生产环境的区别，查询哪个环境就填哪种类型的token</p>
            <p class="text-success">3.填入查询接口需要传入的数据（如UDID接口要使用卡牛id查询的话，需要将udid填deviceId-000000000000000-generate-cardniu）</p>
            <p class="text-success">4.点击下方的查询按钮，查询数据成功的话数据会显示在浏览器开发工具的控制台中（chrome按F12开启）</p>
        </div>

        <div id="app">
            <button type="button" class="btn btn-success" v-on:click="openApiBankVar">网银开放接口查变量</button>
            <button type="button" class="btn btn-success" v-on:click="udidApiBankVar">网银UDID接口查变量</button>
            <button type="button" class="btn btn-success" v-on:click="openApiBankDetail">网银开放接口查原始数据</button>
            <button type="button" class="btn btn-success" v-on:click="udidApiBankDetail">网银UDID接口查原始数据</button>
            <button type="button" class="btn btn-success" v-on:click="taobao">淘宝接口查数据</button>
            <button type="button" class="btn btn-success" v-on:click="jdApi">京东原始数据</button>
            <br/><br/><br/>

            <form class="form-horizontal">
                <div class="form-group">
                    <label for="tokenId" class="col-sm-2 control-label">token</label>
                    <div class="col-sm-10">
                        <input v-model="token" id="tokenId"  class="form-control" placeholder="token">
                    </div>
                </div>

                <div class="form-group" v-if="isUdidNeedToShow">
                    <label for="udidId" class="col-sm-2 control-label">设备ID(udid)</label>
                    <div class="col-sm-10">
                        <input v-model="udid" id="udidId"  class="form-control" placeholder="udid">
                    </div>
                </div>

                <div class="form-group" v-if="isCardNiuIdNeedToShow">
                    <label for="cardNiuIdOfId" class="col-sm-2 control-label">卡牛ID</label>
                    <div class="col-sm-10">
                        <input v-model="cardNiuId" id="cardNiuIdOfId"  class="form-control" placeholder="cardNiuId">
                    </div>
                </div>

                <div class="form-group" v-if="isIdCardNeedToShow">
                    <label for="idCardNoId" class="col-sm-2 control-label">身份证</label>
                    <div class="col-sm-10">
                        <input v-model="idCardNo" id="idCardNoId"  class="form-control" placeholder="idCardNo">
                    </div>
                </div>

                <div class="form-group" v-if="isHouseNameNeedToShow">
                    <label for="houseNameId" class="col-sm-2 control-label">用户姓名(houseName)</label>
                    <div class="col-sm-10">
                        <input v-model="houseName" id="houseNameId"  class="form-control" placeholder="houseName">
                    </div>
                </div>

                <div class="form-group" v-if="isLoginNameNeedToShow">
                    <label for="loginNameId" class="col-sm-2 control-label">网银登录名(loginName)</label>
                    <div class="col-sm-10">
                        <input v-model="loginName" id="loginNameId"  class="form-control" placeholder="loginName">
                    </div>
                </div>

                <div class="form-group" v-if="isPhoneNeedToShow">
                    <label for="phoneId" class="col-sm-2 control-label">用户电话(phone)</label>
                    <div class="col-sm-10">
                        <input v-model="phone" id="phoneId"  class="form-control" placeholder="phone">
                    </div>
                </div>

                <button type="button" class="btn btn-success" v-if="isQueryNeedToShow" v-on:click="query(0)">查询测试环境</button>
                <button type="button" class="btn btn-danger" v-if="isQueryNeedToShow" v-on:click="query(2)">查询UAT环境</button>
                <button type="button" class="btn btn-danger" v-if="isQueryNeedToShow" v-on:click="query(1)">查询生产环境</button>
            </form>
        </div>
    </div>
</body>

<script>
        var app = new Vue({
          el: '#app',
          data: {
            token:'eccc5fa870484cceadbf3955c3405256',
            udid:'deviceId-000000000000000-generate-cardniu',
            cardNiuId:'',
            idCardNo:'',
            houseName:'',
            loginName:'',
            phone:'',
            isUdidNeedToShow:false,
            isCardNiuIdNeedToShow:false,
            isIdCardNeedToShow:false,
            isHouseNameNeedToShow:false,
            isLoginNameNeedToShow:false,
            isPhoneNeedToShow:false,
            isHistoryNeedToShow:false,
            isQueryNeedToShow:false,
            queryWhat:''
          },
          methods:{
            openApiBankVar: function () {
                console.log('openApiBankVar')
                this.queryWhat = 'openApiBankVar'
                this.isIdCardNeedToShow = true
                this.isHouseNameNeedToShow = true
                this.isLoginNameNeedToShow = true
                this.isPhoneNeedToShow = true
                this.isQueryNeedToShow = true
            },
            openApiBankDetail: function () {
                console.log('openApiBankDetail')
                this.queryWhat = 'openApiBankDetail'
                this.isIdCardNeedToShow = true
                this.isHouseNameNeedToShow = true
                this.isLoginNameNeedToShow = true
                this.isPhoneNeedToShow = true
                this.isQueryNeedToShow = true
            },
            udidApiBankVar: function () {
                console.log('udidApiBankVar')
                this.queryWhat = 'udidApiBankVar'
                this.isUdidNeedToShow = true
                this.isCardNiuIdNeedToShow = true
                this.isHouseNameNeedToShow = true
                this.isIdCardNeedToShow = true
                this.isQueryNeedToShow = true
            },
            udidApiBankDetail: function () {
                console.log('udidApiBankDetail')
                this.queryWhat = 'udidApiBankDetail'
                this.isUdidNeedToShow = true
                this.isCardNiuIdNeedToShow = true
                this.isHouseNameNeedToShow = true
                this.isIdCardNeedToShow = true
                this.isQueryNeedToShow = true
            },
            taobao: function () {
                console.log('taobao')
                this.queryWhat = 'taobao'
                this.isIdCardNeedToShow = true
                this.isHouseNameNeedToShow = true
                this.isLoginNameNeedToShow = true
                this.isPhoneNeedToShow = true
                this.isQueryNeedToShow = true
            },
            jdApi: function () {
                console.log('jdApi')
                this.queryWhat = 'jdApi'
            },
            query:function(isProd){
                console.log('you want to query '+this.queryWhat+',isProd='+isProd)

                var data = {
                    'token':this.token,
                    'udid':this.udid,
                    'cardNiuId':this.cardNiuId,
                    'idCardNo':this.idCardNo,
                    'houseName':this.houseName,
                    'loginName':this.loginName,
                    'phone':this.phone,
                    'queryWhat':this.queryWhat,
                    'isProd':isProd
                }
                console.log('data is:'+JSON.stringify(data))

                var postData = {
                    'data':JSON.stringify(data)
                }
                $.post('/query',postData,function(result){

                    if(result!='FAIL'){
                        alert('查询成功,结果看浏览器控制台')
                    }
                    console.log(result)
                })
            }
          }
        })
    </script>
</html>